﻿<script id="CommentTemplate" type="text/html">
    <div id="comments-section">
      
        @*New comment*@
        <div id="comment-new">
            Post a new comment:
            <br />
            <textarea  data-bind="value: comment().content" class="post-comment" cols=15 rows=6 ></textarea>
            <br />
            <a data-bind="click: cancelPostComment">Cancel</a>&nbsp;or&nbsp;<button data-bind="click: postComment">Post</button>
        </div>
        <br/>
        @*Count comments*@
          <h2 class="count section"><span data-bind="text: viewmodel.numberOfComments()"></span> comments 
        (page <span data-bind="text: viewmodel.commentPageNo()"></span> of 
        <span data-bind="text: viewmodel.totalCommentPage()"></span>)</h2>

        @*A list of existing comments*@
        <ol id="comment" class="comments" data-bind="template: {name:'CommentListTemplate', foreach: commentCollection}"></ol>

        @*Pager*@
        <div id="comment-pager">
            <button id="prev" data-bind="visible: isShowPrevBtn,click: fetchPreviousCommentPage">Previous</button>
            <button id="next" data-bind="visible: isShowNextBtn,click: fetchNextCommentPage">Next</button>
        </div>
    </div>
</script>
<script id="CommentListTemplate" type="text/html">
    <li id="comment-477628" class="response comment group ">
        <h2>
            <a href="#" class="url" rel="contact" title="Josh King">
                <img alt="avatar" class="photo fn" src="http://dribbble.s3.amazonaws.com/users/2567/avatars/original/logo_lg.jpg?1305129915">
                Josh King</a>
        </h2>
        <h2>
            <a  href="#" data-bind="text: 'Nhim Ho Bao'"/>
        </h2>
        <div class="comment-body">
            <span data-bind="text: content" />
        </div>
        <br/>
        <p class="comment-meta">
            <a href="#comment-477628" class="posted">22 days ago</a>
            |&nbsp;<a href="#comment-477628" data-bind="click: voteUp, disable: isVotedUp">Like</a>
            |&nbsp;<a href="#comment-477628" data-bind="click: voteDown, disable: isVotedDown">Dislike</a>
            |&nbsp;<a href="#comment-477628" data-bind="click: reportContent, disable: isReported">Report</a>
        </p>
    </li>
</script>
